<template>
    <!-- lzy 2023年3月21日 12点52分 -->
    <div id="SysPersonalInfo_box">
        <el-button
            @click="eidtPasswordVisible = true"
            style="background-color: #d7000f; color: #fff"
            >修改密码</el-button
        >
        <el-form style="width: 600px;" :model='sysUserForm'>
            <el-form-item label='头像' :label-width='formLabelWidth'>
                    <!-- 文件上传 -->
                    <el-upload
                        class='avatar-uploader'
                        action=''
                        :show-file-list='false'
                        :on-success='handleAvatarSuccess'
                        :before-upload='beforeAvatarUpload'
                    >
                        <img v-if='imageUrl' :src='imageUrl' class='avatar' />
                        <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                    </el-upload>
                </el-form-item>
            <el-form-item label='用户昵称' :label-width='formLabelWidth'>
                <el-input v-model='sysUserForm.nickName' autocomplete='off' :style='inputWidth'></el-input>
            </el-form-item>
            <el-form-item label='用户登录名称' :label-width='formLabelWidth' prop="loginName">
                <p v-text='sysUserForm.loginName'></p>
            </el-form-item>
            <el-form-item label='角色' :label-width='formLabelWidth'>
                <p v-text='sysUserForm.roleId'></p>
            </el-form-item>
        </el-form>
        <div slot='footer' class='dialog-footer'>
            <el-button @click='saveFormVisible = false'>取 消</el-button>
            <el-button type='primary' @click="saveSysUser('sysUserFrom')">确 定</el-button>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="eidtPasswordVisible"
            width="30%">
            <el-form :model="sysUserPasswordForm" :rules="sysUserPasswordFormRules" ref="sysUserPasswordForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="旧密码" prop="oldPassword">
                    <el-input v-model="sysUserPasswordForm.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="sysUserPasswordForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="sysUserPasswordForm.confirmPassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    <el-button @click="eidtPasswordVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            // 用户对象信息
            sysUserForm: {
                id: '',
                // 用户昵称
                nickName: '',
                // 密码
                password: '',
            },
            // 图片路径
            imageUrl: '',
			formLabelWidth: '100px',
			// 新增用户弹框文本框宽度
			inputWidth: 'width:60%',
            // 修改密码弹框
            eidtPasswordVisible: false,
            sysUserPasswordForm: {
                // 旧密码
                oldPassword: '',
                // 新密码
                newPassword: '',
                // 确认新密码
                confirmPassword: ''
            }
            
        }
    },
    mounted () {
        // 初始化对象赋值
        this.setSysUserForm()
    },
    methods: {
        // 消息提示框方法
        message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		},
        // 修改密码
        editPassword (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$axios.put('/sysUser/editPassword').then(res => {
                        if (res.data.flag) {
                            this.message('修改成功', 'success')
                        } else {
                            this.message('修改失败', 'warning')
                        }
                    })
                } else {
                    return false;
                }
            })
            
        },
        // 对象赋值
        setSysUserForm () {
            // 初始化获取登录用户信息
            this.sysUserForm = JSON.parse(sessionStorage.getItem('user')).obj
            this.imageUrl = this.$imageUrl + '?id=' + this.sysUserForm.avatarId
        },
        handleAvatarSuccess (res, file) {
			this.imageUrl = URL.createObjectURL(file.raw)
		},
		// 上传文件校验
		beforeAvatarUpload (file) {
			const isJPG = file.type === 'image/jpeg'
			const isPNG = file.type === 'image/png'
			const isMP3 = file.type === 'image/mp3'
			const isLt2M = file.size / 1024 / 1024 < 10
			if (!isJPG && !isPNG && !isMP3) {
				this.$message.error('上传头像图片只能是 JPG 和 PNG 和 MP3 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			this.imageUrl = URL.createObjectURL(file)
			this.imageFile = file
            console.log(this.imageFile)
			return false
		},
    }
}
</script>

<style scoped>
#SysPersonalInfo_box{
    width: 100%;
    height: 100%;
}
/* 图片上传框样式 start */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    border-radius: 6px;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
/* 图片上传框样式 end */
</style>